﻿@model ExpressQuiz.ViewModels.QuizReviewViewModel


@section styles
{
    @Styles.Render("~/Scripts/starrating/star-rating.min.css")

    @Styles.Render("//cdn.datatables.net/1.10.2/css/jquery.dataTables.css");
}




<br />

<div>


    <dl>
        <dt>
            @Html.DisplayNameFor(model => model.Score)
        </dt>
        <dd>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: @Model.Score%;">
                    @Model.ScoreText
                </div>
            </div>
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.EllapsedTime)
        </dt>
        <dd>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: @Model.EllapsedTimePercent%;">
                    @Model.EllapsedTime seconds
                </div>
            </div>
        </dd>
    </dl>

    <div class="row">
        @if (Model.RelativeScore != -1)
        {
            <div class="col-lg-6 text-center">

                <div class="well">
                    You scored higher than <h1>@Model.RelativeScore%</h1> of all users
                </div>


            </div>
        }
        @if (Model.RelativeTime != -1)
        {
            <div class="col-lg-6 text-center">

                <div class="well">
                    You were faster than <h1>@Model.RelativeTime%</h1> of all users
                </div>

            </div>
        }


    </div>

    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>#</th>
                <th>Question</th>
                <th>Correctly answered</th>
                <th>Points earned</th>
                <th></th>
            </tr>
        </thead>

        <tbody>

            @{
                int count = 0;
                foreach (var q in Model.Items)
                {
                    count++;
                    <tr>
                        <td>@count.ToString()</td>

                        <td>@( q.QuestionText.Length > 50 ? q.QuestionText.Substring(0, 47) + "..." : q.QuestionText)</td>
                        <td>@q.IsCorrectAnswer</td>
                        <td>@q.PointsEarned</td>
                        <td>
                            @Html.ActionLink("Review", "Question", new
                       {
                           questionId = q.QuestionId,
                           resultId = Model.ResultId,
                           userAnswerId = Model.UserAnswers.First(x => x.QuestionId == q.QuestionId).AnswerId
                       })
                        </td>
                    </tr>

                }
            }


        </tbody>
    </table>

</div>

<br />
<div class="text-center">
    <button type="button" onclick="rate()" class="btn btn-primary">Exit quiz</button>
</div>


<div id="rateQuiz" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Your opinion counts</h4>
            </div>

            @using (Html.BeginForm())
            {
                <div class="modal-body">

                    <div class="form-horizontal">

                        @Html.AntiForgeryToken()

                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                        @Html.HiddenFor(model => model.QuizId)
                        @Html.HiddenFor(m => m.Rating)
                        @Html.HiddenFor(m => m.Level)
                        <div class="form-group">
                            @Html.Label("How much did you like it?")
                            <div>

                                <input id="ratingStar" type="number" class="rating form-control" value="2.5" min=0 max=5 step=0.5 data-size="xs">

                            </div>
                        </div>

                        <div class="form-group">
                            @Html.Label("How difficult was it?")
                            <div>

                                <input id="levelStar" type="number" class="rating" value="2.5" min=0 max=5 step=0.5 data-size="xs">

                            </div>
                        </div>




                    </div>
                </div>

                <div class="modal-footer">

                    <div class="form-group">
                        <div>
                            <input type="submit" value="Close" class="btn btn-primary center-block" />
                        </div>
                    </div>
                </div>
            }


        </div>
    </div>
</div>

@Scripts.Render("~/Scripts/starrating/star-rating.min.js")
@Scripts.Render("//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js");
<script>



    $(function () {



        $('#example').dataTable({
            "paging": false,
            "ordering": true,
            "info": false,
            "searching": false
        });



        $("#levelStar").rating({
            showClear: false,
            showCaption: false,
            stars: 5
        });
        $("#ratingStar").rating({
            showClear: false,
            showCaption: false,
            stars: 5
        });

        $('#levelStar').on('rating.change', function (event, value, caption) {
            $("#Level").attr('value', value);
        });

        $('#ratingStar').on('rating.change', function (event, value, caption) {
            $("#Rating").attr('value', value);
        });
    });

    function rate() {
        $("#rateQuiz").modal("show");

    }


</script>


